<template>
    <view class="productList">
        <view class="item" v-for="(item,index) in products" :key="index" @click="orderCreated(item)">
            <image class="img" :src="item.headImageUrl"/>
            <view class="info">
                <view class="title"> {{ item.name ||"--"}}</view>
                <view class="details">
                    <view class="text">
                        <view class="intro">{{item.tags||"--"}}</view>
                        <view class="store_name">
                            {{item.merchantName||"--"}}
                            <view class="link" @click.stop="enterStore(item.merchantId)">进店
                                <wd-icon name="arrow-right"></wd-icon>
                            </view>   
                        </view>
                    </view>
                    <view class="price">
                        ￥<view class="num">{{item.price||0}}</view>起
                    </view>
                </view>
            </view>
        </view>
        <view class="more" @click="loadMore" v-if="hasMore">
        查看更多
        <wd-icon name="arrow-down"></wd-icon>
        </view>
        <view class="more" v-else>
        没有更多了
        </view>
    </view>
</template>

<script  setup>
import { ref, watch, defineProps, onMounted } from 'vue';
const props = defineProps({
  products: {
    type: Array,
    required: true
  },
  hasMore: {
    type: Boolean,
    required: true
  }
});

const orderCreated =(e)=>{
    const url = `/premiumRouteSubPack/pages/orderConfig/index?id=${e.id}&price=${e.price}&merchantId=${e.merchantId}`;
    uni.navigateTo({
        url: url
    });
}
const enterStore =(e)=>{
    const url = `/premiumRouteSubPack/pages/merchant/index?id=${e}&merchantId=${e}`;
    uni.navigateTo({
        url: url
    });
}
const emit = defineEmits(['load-more']);

const loadMore = () => {
  emit('load-more');
};
</script>

<style lang="scss" scoped>
.productList{
    padding: 40rpx 34rpx;
    background: #fff;
    border-radius: 10rpx;
    .item{
        display: flex;
        padding: 36rpx 0;
        border-bottom: 1rpx solid #C0C2B3 ;
        &:first-child{
            padding-top: 0;
        }
        .img{
            height: 180rpx;
            width: 180rpx;
            border-radius: 6rpx;
            margin-right: 12rpx;
        }
        .info{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            .title{
                font-size: 30rpx;
                font-weight: bold;
                color: #2b2b24;
            }
            .details{
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                .text{
                    .intro{
                        margin-bottom: 20rpx;
                        font-size: 24rpx;
                        color: #777777;
                    }
                    .store_name{
                        color: #2b2b24;
                        display: flex;
                        align-items: center;
                        .link{
                            margin-left: 15rpx;
                            color: #088ce4;
                        }
                    }
                }
                .price{
                    display: flex;
                    align-items: flex-end;
                    white-space: nowrap;
                    color: #AA5414;
                    font-size: 22rpx;
                    .num{
                        font-size: 36rpx;
                        font-weight: bold;
                    }
                }
            }
        }
    }
    .more{
        text-align: center;
        padding: 40rpx 0 10rpx;
        color: #2b2b24;
    }
}
</style>